/*
 * @Description: 
 * @Author: fhw
 * @Date: 2023-02-26 15:36:37
 */
import { useRequest, useSearch } from '@/hooks'
import { successTips } from '@/utils'
import { Modal } from 'ant-design-vue'
import { clone, head, last } from 'ramda'
import { createVNode, defineComponent, reactive, ref, toRaw } from 'vue'
import CreateIndex from './components/createIndex'
import { AdminUserState, rows, columns } from './uilts'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import EditPassword from './components/editPassword'
import { DownOutlined } from '@ant-design/icons-vue'
import { FormBasicData } from '@/components'
export default defineComponent({
	name: "AdminUser",
	setup() {
		const pageState = reactive({
			visible: false,
			dataSource: {}
		})
		const editPasswordState = reactive({
			visible: false,
			userId: null as null | number
		})
		const { searchForm, expand, expandToggle } = useSearch<API.server.adminUser.getAdminUserPage.Params>({})
		function search() {
			const params = clone(toRaw(searchForm.value))
			if (params.createTimeStart && Array.isArray(params.createTimeStart)) {
				params.createTimeEnd = `${last(params.createTimeStart)} 23:59:59`
				params.createTimeStart = `${head(params.createTimeStart)} 00:00:00`
			}
			if (params.updateTimeStart && Array.isArray(params.updateTimeStart)) {
				params.createTimeEnd = `${last(params.updateTimeStart)} 23:59:59`
				params.updateTimeStart = `${head(params.updateTimeStart)} 00:00:00`
			}
			run({
				...params,
				...getPagination(true),
			})
		}
		function clear() {
			searchForm.value = {}
			search()
		}
		const { run, data, getPagination, renderPagination, loading } = useRequest(
			API.server.adminUser.getAdminUserPage.request,
			{
				manual: true,
				pagination: true,
			}
		)
		/**
		 * 删除管理用户
		 * @param record 管理用户信息
		 */
		function delAdminUser(record: AdminUserState) {
			Modal.confirm({
				title: '确定删除该用户？',
				icon: createVNode(ExclamationCircleOutlined),
				onOk: async () => {
					const { success } = await API.server.adminUser.delAdminUser.request({ id: record.id as number })
					if (success) {
						successTips('删除成功')
						search()
					}
				}
			})
		}
		/**
		 * 重置密码
		 * @param record 管理用户信息
		 */
		function resetPassWord(record: AdminUserState) {
			Modal.confirm({
				title: '确定重置密码？',
				icon: createVNode(ExclamationCircleOutlined),
				onOk: async () => {
					const { success } = await API.server.adminUser.resetPassWord.request({ id: record.id as number })
					if (success) {
						successTips('重置成功')
						search()
					}
				}
			})
		}
		function adminUserBindRole(record: AdminUserState) {
			const roleId = ref(record.roles?.id)
			Modal.confirm({
				title: '角色绑定',
				content: createVNode(<FormBasicData v-model={[roleId.value, 'value']} prop="roleList" style='width: 100%' />),
				onOk: async () => {
					const { success } = await API.server.adminUser.adminUserBindRole.request({ userId: record.id as number, roleId: roleId.value as number })
					if (success) {
						successTips('角色绑定成功')
						search()
					}
				}
			})
		}
		function actionRender({ record }: F.RableSlotScope<AdminUserState>) {
			return (
				<a-dropdown
					v-slots={{
						overlay: () => {
							return (
								<a-menu>
									<a-menu-item >
										<a-button
											type="link"
											block
											onClick={() => {
												pageState.dataSource = clone(record)
												pageState.visible = true
											}}
										>
											编辑
										</a-button>
									</a-menu-item>
									<a-menu-item >
										<a-button type="link" block onClick={() => {
											editPasswordState.userId = record.id as number
											editPasswordState.visible = true
										}}>
											修改密码
										</a-button>
									</a-menu-item>
									<a-menu-item>
										<a-button type="link" block onClick={() => adminUserBindRole(record)}>
											绑定角色
										</a-button>
									</a-menu-item>
									<a-menu-item>
										<a-button type="link" block onClick={() => resetPassWord(record)}>
											重置密码
										</a-button>
									</a-menu-item>
									<a-menu-item>
										<a-button type="link" block danger onClick={() => delAdminUser(record)}>
											删除
										</a-button>
									</a-menu-item>
								</a-menu>
							)
						}
					}}

				>
					<a class="ant-dropdown-link">
						更多操作
						<DownOutlined />
					</a>
				</a-dropdown>
			)
		}
		function tableHeader() {
			return [
				<a-button type="primary" onClick={() => {
					pageState.visible = true
					pageState.dataSource = {}
				}}>
					新增
				</a-button>,
			]
		}
		return () => (
			<div>
				<f-search
					labelCol={{ span: 6 }}
					wrapperCol={{ span: 18 }}
					loading={loading.value}
					clear={clear}
					search={search}
					expand={{
						value: expand.value,
						expandToggle,
					}}
					searchKey='adminUserSearchKey'
					model={searchForm.value}
					rows={rows}
				/>
				<f-table
					v-slots={{ header: tableHeader, actionRender }}
					columns={columns}
					dataSource={data.value.data?.data}
					loading={loading.value}
					rowKey="id"
					tableKey='adminUserTabl'
				/>
				{renderPagination()}
				<CreateIndex visible={pageState.visible} dataSource={pageState.dataSource} onCancel={() => {
					pageState.visible = false
					pageState.dataSource = {}
				}} onSearch={search} />
				<EditPassword visible={editPasswordState.visible} userId={editPasswordState.userId as number} onCancel={() => {
					editPasswordState.visible = false
					editPasswordState.userId = null
				}} onSearch={search} />
			</div>
		)
	}
})
